<template>
  <div v-if="show" class="loading">
    <div v-if="type === 1" class="grid-center">
      <div class="sk-fold">
        <div class="sk-fold-cube"></div>
        <div class="sk-fold-cube"></div>
        <div class="sk-fold-cube"></div>
        <div class="sk-fold-cube"></div>
      </div>
      <div class="text">{{ text }}</div>
    </div>

    <div v-if="type === 2" class="grid-center">
      <div class="sk-grid">
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
      </div>
      <div class="text">{{ text }}</div>
    </div>

    <div v-if="type === 3" class="grid-center">
      <div class="sk-pulse"></div>
      <div class="text">{{ text }}</div>
    </div>

    <div v-if="type === 4" class="grid-center">
      <div class="bounce">
        <span class="letter">l</span>
        <span class="letter">o</span>
        <span class="letter">a</span>
        <span class="letter">d</span>
        <span class="letter">i</span>
        <span class="letter">n</span>
        <span class="letter">g</span>
        <span class="letter">.</span>
        <span class="letter">.</span>
        <span class="letter">.</span>
      </div>
    </div>

    <div v-if="type === 5" class="grid-center">
      <view class="thorui-loading__3">
        <view></view>
      </view>
      <div class="text">{{ text }}</div>
    </div>

    <div v-if="type === 6" class="grid-center">
      <view class="thorui-loading">
        <view class="thorui-loading-line thorui-ani1"></view>
        <view class="thorui-loading-line thorui-ani2"></view>
        <view class="thorui-loading-line thorui-ani3"></view>
      </view>
      <div class="text">{{ text }}</div>
    </div>

    <div v-if="type === 7" class="grid-center">
      <view class="thorui-loading__2">
        <view class="thorui-ani__1"></view>
        <view class="thorui-ani__2"></view>
        <view></view>
      </view>
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loading',
  props: {
    // 显示的 loading 样式类型
    type: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      show: false, // 是否展示
      text: 'loading ...' // 加载文字
    }
  },
  methods: {
    open(text, duration = 10) {
      if (text) this.text = text
      this.show = true

      setTimeout(() => {
        this.close()
      }, duration * 1000)
    },
    close() {
      setTimeout(() => {
        this.show = false
      }, 200)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$size: 40px;
$color: #b9b9b9;
$bg: rgba(0, 0, 0, 0.8);

.grid-center {
  display: grid;
  place-items: center;
  color: $color;

  .text {
    font-size: 12px;
    margin-top: 20px;
    letter-spacing: 2px;
    // font-weight: bold;
  }
}

.loading {
  width: 100%;
  height: 100%;
  background: $bg;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999; // 主要是为了高于自定义组件 my-modal 的 mask 层级
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-top: 30vh;
}

/* 
 * 翻页效果
 * <div class="sk-fold">...</div> 
 */
.sk-fold {
  width: $size;
  height: $size;
  position: relative;
  transform: rotateZ(45deg);
}
.sk-fold-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  transform: scale(1.1);
}
.sk-fold-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $color;
  animation: sk-fold 2.4s infinite linear both;
  transform-origin: 100% 100%;
}
.sk-fold-cube:nth-child(2) {
  transform: scale(1.1) rotateZ(90deg);
}
.sk-fold-cube:nth-child(4) {
  transform: scale(1.1) rotateZ(180deg);
}
.sk-fold-cube:nth-child(3) {
  transform: scale(1.1) rotateZ(270deg);
}
.sk-fold-cube:nth-child(2):before {
  animation-delay: 0.3s;
}
.sk-fold-cube:nth-child(4):before {
  animation-delay: 0.6s;
}
.sk-fold-cube:nth-child(3):before {
  animation-delay: 0.9s;
}

@keyframes sk-fold {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

/* 
 * 网格翻页效果
 * <div class="sk-grid">...</div>
 */
.sk-grid {
  width: $size;
  height: $size;
}
.sk-grid-cube {
  width: 33.33%;
  height: 33.33%;
  background-color: $color;
  float: left;
  animation: sk-grid 1.3s infinite ease-in-out;
}
.sk-grid-cube:nth-child(1) {
  animation-delay: 0.2s;
}
.sk-grid-cube:nth-child(2) {
  animation-delay: 0.3s;
}
.sk-grid-cube:nth-child(3) {
  animation-delay: 0.4s;
}
.sk-grid-cube:nth-child(4) {
  animation-delay: 0.1s;
}
.sk-grid-cube:nth-child(5) {
  animation-delay: 0.2s;
}
.sk-grid-cube:nth-child(6) {
  animation-delay: 0.3s;
}
.sk-grid-cube:nth-child(7) {
  animation-delay: 0s;
}
.sk-grid-cube:nth-child(8) {
  animation-delay: 0.1s;
}
.sk-grid-cube:nth-child(9) {
  animation-delay: 0.2s;
}

@keyframes sk-grid {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}

/*  
 * 水波纹效果
 * <div class="sk-pulse"></div>
 */
.sk-pulse {
  width: $size;
  height: $size;
  background-color: $color;
  border-radius: 100%;
  animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes sk-pulse {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*  
 * 文字跳动效果
 * <div class="bounce"></div>
 */
.bounce {
  display: flex;
  align-items: center;
  justify-content: center;
  font: normal bold 6rem 'Product Sans', sans-serif;
  white-space: nowrap;
  margin-top: 10vh;
}
.letter {
  display: inline-block;
  font: normal 500 2rem 'Varela Round', sans-serif;
  text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
  transform: translate3d(0, 0, 0);
  animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
}
.letter:nth-child(1) {
  animation-delay: 0s;
}
.letter:nth-child(2) {
  animation-delay: 0.0833333333s;
}
.letter:nth-child(3) {
  animation-delay: 0.1666666667s;
}
.letter:nth-child(4) {
  animation-delay: 0.25s;
}
.letter:nth-child(5) {
  animation-delay: 0.3333333333s;
}
.letter:nth-child(6) {
  animation-delay: 0.4166666667s;
}
.letter:nth-child(7) {
  animation-delay: 0.4999999998s;
}
.letter:nth-child(8) {
  animation-delay: 0.5833333331s;
}
.letter:nth-child(9) {
  animation-delay: 0.6666666664s;
}
.letter:nth-child(10) {
  animation-delay: 0.7499999997s;
}

@keyframes bounce {
  0% {
    transform: translate3d(0, 0, 0);
    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
  }
  100% {
    transform: translate3d(0, -1em, 0);
    text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
  }
}
</style>
